<script setup lang="ts">
import { SignalFilled, ArrowRightOutlined } from '@ant-design/icons-vue'
const props = defineProps({
  title: String,
  icon: {
    type: Object,
    default: () => SignalFilled,
  },
})
</script>
<template>
  <!-- 封装热门话题与热榜的标题 -->
  <div class="hot-title">
    <div class="title">
      <component :is="props.icon" class="icon" />
      <p>{{ title }}</p>
    </div>
    <div>
      <p class="more">
        查看更多话题
        <ArrowRightOutlined />
      </p>
    </div>
  </div>
</template>
<style scoped lang="scss">
.hot-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .625rem;
  border-bottom: .0625rem solid #fafafa;

  p {
    margin-bottom: 0;
  }

  .icon {
    padding-right: .625rem;
    color: $educ-color-primary;
  }

  .title {
    display: flex;
    align-items: center;
  }

  .more {
    font-size: .625rem;
    color: #999;
    cursor: pointer;

    p {
      padding-left: .5rem;
      font-size: 1.125rem;
    }
  }

  .more:hover {
    color: #1e62ec;
  }
}

@media screen and (width <= 67.5rem) {
  .title .icon {
    display: none ;
  }
}
</style>
